<template>
	<view>

		<view class="item" v-if="dataDetail">

			<bankItem 
				:bankCode="dataDetail.bankCode"
				:bankName="dataDetail.bankCodeStr"
				:cardCode="dataDetail.bankCardNo"
				:mobileNo="dataDetail.mobileNo"
				:cardType="dataDetail.bankCardType == 1?'信用卡':'储蓄卡'" />

			<text class="unbind" @click="unbind">解绑银行卡</text>

		</view>
		
		<u-modal title="提示" content="" :show="showUnbind" showCancelButton closeOnClickOverlay @confirm="confirm"
			@cancel="cancel" @close="close">
		
			<view style="text-align: center;font-size: 32upx;color: #A7A7A7;">确定解绑吗？</view>
		</u-modal>
		
	</view>
</template>

<script>
	import bankItem from '../../../components/mine/bank-item.vue';
	import {customerunsign} from '../../../common/api.js';

	export default {
		components: {
			bankItem
		},
		data() {
			return {
				dataDetail: null,
				showUnbind:false
			}
		},
		methods: {
			unbind() {
				this.showUnbind = true;
			},
			confirm() {
				this.showUnbind = false
				console.log('confirm');
				
				customerunsign({
					params:{
						bankCarSignId:this.dataDetail.id
					}
				}).then(res=>{
					uni.showToast({
						icon:'none',
						title:'解绑成功'
					})
					
					setTimeout(()=>{
						uni.navigateBack()
					}, 1000)
				})
				
				
			},
			cancel() {
				this.showUnbind = false
			},
			close() {
				this.showUnbind = false
			}
		},
		onLoad(op) {
			this.dataDetail = op;
		}
	}
</script>

<style lang="scss" scoped>
	.bank-card {
		@include flex(column);

		height: 230upx;
		margin: 40upx 25upx 0;
		border-radius: 18upx;
		background-color: #FF7165;


		.bank-top {
			@include flex;
			height: 140upx;
			align-items: center;

			image {
				width: 80upx;
				height: 80upx;
				margin-left: 20upx;
			}

			.name-wrap {
				@include flex(column);
				margin-left: 25upx;
				flex-grow: 1;
				margin-right: 10upx;

				.name {
					font-size: 30upx;
					color: $white;
					font-weight: bold;
				}

				.type {
					font-size: 26upx;
					color: $white;
					margin-top: 8upx;
				}
			}

			.phone {
				color: $white;
				font-size: 28upx;
				margin-right: 40upx;
				align-self: flex-start;
				margin-top: 30upx;
			}

		}


		.cardno {
			font-size: 30upx;
			color: $white;
			font-weight: bold;
			align-self: flex-end;
			margin: 20upx 40upx 0 0;
		}

	}

	.unbind {
		font-size: 32upx;
		color: $black33;
		line-height: 90upx;
		font-weight: bold;
		margin-left: 38upx;
	}
</style>
